﻿<!DOCTYPE HTML>
<html>
{include file="public:header_css"}
<link href="__STATIC__/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />


<link rel="stylesheet" type="text/css" href="__STATIC__/webupload/css/webuploader.css"/>

<script type="text/javascript" src="__STATIC__/webupload/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/webupload/js/webuploader.js"></script>


<style>
	.row {
		margin-bottom: 20px;
	}
</style>
<body>

<nav class="breadcrumb">
	<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 广告管理 <span class="c-gray en">&gt;</span> 添加广告
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>

<div class="page-container">
<div style="">
	<!--<form action="" method="post" class="form form-horizontal" id="form-shops-add" enctype="multipart/form-data" name="myForm">-->
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="title" name="title" style="width:60%;">
			</div>
		</div>
		<!--添加音乐开始-->
		<div class="row cl">

			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>背景音乐：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div  id="checkshow1" style="padding: 5px;float: left">
					<audio controls="controls" autoplay="autoplay" loop="loop" src=""  id="music">

					</audio>

					<!--http://paxfaabtn.bkt.clouddn.com/1ec80ad99b7f5d4017a7d03731ba987f.mp3-->
				</div>
				<div style="margin: 20px 0 0 20px;float: left">
					<div  id="up_video">添加音乐</div>
					<span style="color:#c8a0a0;">建议上传mp3格式音乐</span>
				</div>
				<!--<input type="file" class="input-text" id="fileUpload" name="pic_url" style="display: none">-->
			</div>

		</div>
		<!--添加音乐结束-->

		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<a class="btn btn-primary radius" id="submit">&nbsp;&nbsp;提交&nbsp;&nbsp;</a>
                <a class="btn btn-warning radius" href="{:url('index')}">&nbsp;&nbsp;取消&nbsp;&nbsp;</a>
			</div>
		</div>
</div>
	<!--</form>-->
	<div style="margin-top: 50px">
		<div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a class="btn btn-primary radius" >
				 已添加音乐
			</a>
		</span>
			<span class="r">共有数据：<strong>{$total}</strong> 条</span>
		</div>

		<div class="mt-20">
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
				<tr class="text-c">
					<!-- <th width="40"><input name="" type="checkbox" value=""></th> -->
					<th width="80">ID</th>
					<!--<th width="100">图片</th>-->
					<th width="150">音乐名称</th>
					<!--<th width="150">超链接</th>-->
					<th width="150">添加时间</th>
					<th width="60">试听</th>
					<th width="100">操作</th>
				</tr>
				</thead>
				<tbody>
				{foreach name="list" item="v" key="k"}
				<tr class="text-c">
					<td>{$v.id}</td>

					<td class="text-c">{$v.title}</td>

					<td class="text-c">{$v.create_time}</td>
					<td class="text-c">
						<audio controls="controls"  loop="loop" src="{$v.m_url}"></audio>
					</td>

					<td class="td-manage">
						<!--<a style="text-decoration:none" class="ml-5" href="edit.html?id={$v.id}" title="编辑">-->
						<!--<i class="Hui-iconfont" style="font-size:20px;">&#xe6df;</i>-->
						<!--</a>-->
						<a style="text-decoration:none" class="ml-5" onClick="del('{$v.id}')" href="javascript:;" title="删除">
							<i class="Hui-iconfont" style="font-size:20px;">&#xe6e2;</i>
						</a>
					</td>
				</tr>
				{/foreach}
				</tbody>
			</table>
		</div>

		{$page}

	</div>
</div>




{include file="public:footer_js"}

<!--<script type="text/javascript" src="__STATIC__/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>-->
<script type="text/javascript">

    //上传音频文件

    var uploader = WebUploader.create({
        // swf文件路径
        swf: '__STATIC__/webupload/js/Uploader.swf',

        // 文件接收服务端。
        server: "{:url('qiniu/upload')}",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#up_video',

        // 限制文件上穿大小为100M
        fileSingleSizeLimit: 100*1024*1024,
        auto:true,

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,

        // 只允许选择音频文件。
        accept: {
            title: 'video',
            extensions: 'mp3,mp4',
            mimeTypes: 'video/*,audio/*'
        }
    });

    /**
     * 验证文件格式、数量以及文件大小
     */
    uploader.on("error",function(type){
        if(type == 'F_EXCEED_SIZE'){
            alert("文件大小不能超过100M");
        }
    });


    uploader.on('uploadSuccess', function (file, response) {

        console.log(response)
        if(file.name == null || file.name == 'undefind'){
            alert("上传失败");
            return;
        }else {
            var $music = $("#music");
            $music.attr( 'src', response.url );
        }
    });

        // 提交数据
		$("#submit").click(function () {

            var title 		= $("#title").val();
            var music		= $("#music").attr("src");

            console.log(title);
            console.log(music);
            // 标题不可为空
            if(title === '' || title === "undefined"){
                layer.msg("请填写标题",{icon:5,time:1000});
                $("#title").focus();
                return;
			}


            if(music === '' || music === "undefined"){
                layer.msg("请添加音乐",{icon:5,time:1000});
                $("#title").focus();
                return;
            }

            // 异步提交数据
            $.post(
                "{:url('addmusic')}",
                {
                    title:title,
                    music:music

                },
                function (res) {

                    if(res.code === 0){

                        layer.msg(res.msg,{icon:5,time:2000});

                    }else{

                        layer.msg(res.msg,{icon:6,time:2000});
					// 两秒后跳转到列表页
                        setTimeout(function () {
                            location.replace(location.href);
                        },2000);

                    }
                }
            );

        });

</script>

<script>

    /**
     * 删除
     */
    function del(id)
    {
        var notice = "确认删除吗？";

        layer.confirm(notice,function (index) {
            $.post(
                '{:url("m_del")}?id='+id,
                {
                    is_del:1
                },
                function (res) {
                    if(res.code === 1){
                        layer.msg("删除成功",{icon:6,time:1000});

                        // 两秒后跳转到列表页
                        setTimeout(function () {
                            location.replace(location.href);
                        },2000);

                    }else{
                        layer.msg(res.msg,{icon:5,time:1000});
                    }
                }
            );
        });
    }
</script>
</body>
</html>